<script setup>
import { RouterLink, RouterView } from 'vue-router'
import {computed} from "vue"
// 引入登录组件
import LoginView from "./views/LoginView.vue"
// 引入登录请求功能
import { loginApi } from "@/api/user.js"
// 引入创建store的方法
import {useStore} from "vuex";
// 创建store对象
const store = useStore();

// 声明响应式数据
const isLogin = computed(()=>{
  return store.state.user.isLogin;
})

// 自定义事件的事件处理函数（用来接收子组件发送的数据）
function loginFn(un, pw){
  // 发起登录请求
  loginApi(un, pw).then(res=>{
    // 根据响应数据，做出登录后的处理
    if(res.data.code === 0){
      // 登录成功
      // 持久化存储状态
      localStorage.setItem("isLogin", "ok");
      // 通过commit触发mutations中定义的方法，达到修改state的目的
      store.commit("user/change_isLogin", "ok")
    }
  })
}

// 退出
function exit(){
  // 为了持久化存储状态
  localStorage.setItem("isLogin", "");
  // 通过commit触发mutations中定义的方法，达到修改state的目的
  store.commit("user/change_isLogin", "");
}
</script>

<template>
  <div v-if="isLogin === 'ok'">
    <header>
      <div class="wrapper">
        <nav>
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/about">About</RouterLink>
          <RouterLink to="/vuex-a">vuex-a</RouterLink>
          <RouterLink to="/vuex-b">vuex-b</RouterLink>
          <RouterLink to="/vuex-c">vuex-c</RouterLink>
        </nav>
      </div>
    </header>
    <RouterView />
    <el-button type="error" @click="exit">退出</el-button>
  </div>
  <LoginView v-else @login="loginFn"></LoginView>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

</style>
